<template>
  <div style="display: flex;flex-direction: column;height: 100%">
    <Space direction="vertical">
      <Space wrap>
        <Button type="primary" @click="toFormatJson">格式化</Button>
        <Button @click="edit">插入文本</Button>
      </Space>
    </Space>
    <div class="editor-container">
      <MonacoEditor ref="monacoEditor" code-type="html"></MonacoEditor>

    </div>
  </div>

</template>

<script setup>
import {onMounted, ref} from 'vue'
import prettierPluginBabel from 'prettier/plugins/babel'
import prettierPluginVue from 'prettier/plugins/html'
import prettierPluginEs from 'prettier/plugins/estree'

//格式化编辑器
import MonacoEditor from "@/components/monaco-editor/index.js"
import {usePrettierHandle} from './prettierHandle.js'

const {
  monacoEditor,
  prettierFormat
} = usePrettierHandle()

async function toFormatJson() {
  prettierFormat({
    parser: 'html',
    plugins: [prettierPluginBabel, prettierPluginVue,prettierPluginEs],
  })
}
onMounted(()=>{
  monacoEditor.value.editorHandle().setLanguage('html') //修改编辑器的语言类型

})

function edit(){
  monacoEditor.value.editorHandle().animateEdit()
}
</script>

<style scoped>

.editor-container{
  width: 100%;
  height: 200px;
  flex-grow: 1;
  margin-top: 16px;

}
</style>
